<template>
    <div>
        <div class="head">
            <div
                :class="tabindex == index ? 'item_menu_sel' : 'item_menu'"
                v-for="(item, index) in menulist"
                :key="index"
                @click="tabclik(index, item.path)"
            >
                <img :src="item.icon2" v-if="tabindex == index" />
                <img :src="item.icon1" v-else />
                {{ item.title }}
            </div>
            <div class="username">
                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        <span v-if="type == 0">超级管理员</span>
                        <span v-else-if="type == 1">生产运营部</span>
                        <span v-else-if="type == 2">事业部</span>
                        <span v-else-if="type == 3">项目部</span>
                        <span v-else-if="type == 'null'">{{userName}}</span>
                        <i style="color:#ffffff;margin-left:18px;font-size:22px" class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <a href="https://github.com/lin-xin/vue-manage-system" target="_blank"> -->
                        <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
                        <!-- </a> -->
                        <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

        <div class="content_box">
            <router-view></router-view>
        </div>
        <el-dialog title="修改密码" :visible.sync="addVisible" width="590px">
            <el-form
                class="newForm"
                :rules="rules"
                :model="passWordForm"
                ref="passWordForm"
                label-position="left"
                label-width="100px"
                @submit.native.prevent
            >
                <el-form-item label="原始密码" prop="passwordOld">
                    <el-input
                        type="password"
                        placeholder="请输入原始密码"
                        class="newFormInput"
                        v-model="passWordForm.passwordOld"
                        maxlength="200"
                    ></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="passwordNew">
                    <el-input
                        type="password"
                        placeholder="请输入新密码"
                        class="newFormInput"
                        v-model="passWordForm.passwordNew"
                        maxlength="20"
                    ></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="checkPassWord">
                    <el-input
                        type="password"
                        placeholder="请确认新密码"
                        class="newFormInput"
                        v-model="passWordForm.checkPassWord"
                        maxlength="200"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div class="tableBtnBox">
                <button class="btn1" @click="cancelChangePassword">取消</button>
                <button class="btn2" @click="submitForm('passWordForm')">确认</button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { throttle } from '@/utils/tools.js';
import { changePassWord } from '@/api/index.js';
export default {
    data() {
        // 密码格式正则表达式(6~20位，数字+字母)
        let patter = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
        // let lowRegex1=new RegExp
        // let strongRegex = new RegExp('^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$', 'g'); //强
        // let mediumRegex = new RegExp('[da-zA-Z]*d+[a-zA-Z]+[da-zA-Z]* ','g'); //中

        //原密码校验
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入原密码'));
            } else {
                if (this.passWordForm.passwordNew !== '') {
                    this.$refs.passWordForm.validateField('passwordNew');
                }
                callback();
            }
        };
        //输入新密码第一次校验
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else {
                if (!patter.test(value)) {
                    return callback(new Error('请输入6-20位密码，至少使用字符、数字组合'));
                } else {
                    // callback();
                    if (value === this.passWordForm.passwordOld) {
                        callback(new Error('新密码和旧密码不能重复'));
                    } else {
                        if (this.passWordForm.checkPassWord !== '') {
                            this.$refs.passWordForm.validateField('checkPassWord');
                        }
                    }
                }
                callback();
            }
        };

        //输入新密码第二次校验
        var validatePass3 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入新密码'));
            } else if (value !== this.passWordForm.passwordNew) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            passWordForm: {
                passwordOld: '',
                passwordNew: '',
                checkPassWord: ''
            },
            rules: {
                passwordOld: [{ validator: validatePass, trigger: 'blur' }],
                // passwordNew: [{ validator: validatePass2, trigger: 'blur' }],
                checkPassWord: [{ validator: validatePass3, trigger: 'blur' }]
            },
            type: '',
            menulist: [
                {
                    icon1: require('@/assets/img/icon_main_extrance_moren.png'),
                    icon2: require('@/assets/img/icon_main_extrance_moren.png'),
                    title: '系统入口',
                    path: '/systementrance'
                },
                {
                    icon1: require('@/assets/img/icon_organization _management_sel.png'),
                    icon2: require('@/assets/img/icon_organization _management_sel.png'),
                    title: '组织管理',
                    path: '/organizationalmanagement'
                },
                {
                    icon1: require('@/assets/img/icon_user_1.png'),
                    icon2: require('@/assets/img/icon_user management_dianji .png'),
                    title: '用户管理',
                    path: '/userMang'
                },
                {
                    icon1: require('@/assets/img/icon_root_1.png'),
                    icon2: require('@/assets/img/icon_role management_dianji.png'),
                    title: '角色管理',
                    path: '/rootmanagement'
                }
            ],
            tabindex: 0,
            addVisible: false,
            userName:''
        };
    },
    created() {
        // 保证页面和路由相对
        let path = this.$route.path;
        switch (path) {
            case '/systementrance':
                this.tabindex = 0;
                break;
            case '/organizationalmanagement':
                this.tabindex = 1;
                break;
            case '/userMang':
                this.tabindex = 2;
                break;
            case '/rootmanagement':
                this.tabindex = 3;
                break;
            default:
                break;
        }
        if(this.$route.query){
          if(this.$route.query.type==1){
            this.addVisible = true;
          }
        }
         this.username();
    },
    methods: {
      //判断用户类型
        username() {
            this.type = localStorage.getItem('type');
            this.userName=localStorage.getItem('projectid')
        },
        //修改密码表单提交
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let passWordForm = {
                        oldPassword: this.$md5(this.passWordForm.passwordOld),
                        newPassword: this.$md5(this.passWordForm.passwordNew),
                        userId: localStorage.getItem('userid')
                    };
                    changePassWord(passWordForm).then(res => {
                        if (res.code === 200) {
                            this.$message.success('身份信息已更新,请重新登录');
                            this.$Cookies.remove('token');
                            this.$Cookies.remove('password');
                            localStorage.clear();
                            this.$router.push('/login');
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        tabclik(index, path) {
            this.tabindex = index;
            this.$router.push({ path: path });
        },
        // 用户名下拉菜单选择事件
        handleCommand(command) {
            if (command == 'loginout') {
                this.$confirm('是否退出当前登录账号', {
                    customClass: 'newObjectConfirm',
                    center: true,
                    showClose: false,
                    cancelButtonClass: 'logoutCancel',
                    confirmButtonClass: 'logoutConfirm'
                })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '退出成功'
                        });    
                        this.$router.push('/Login');
                        localStorage.clear();
                    })
                    .catch(() => {});
            } else if (command == 'changePassword') {
                this.addVisible = true;
            }
        },
        //取消修改密码
        cancelChangePassword() {
            this.addVisible = false;
            this.passWordForm.passwordOld = ''
            this.passWordForm.passwordNew = ''
            this.passWordForm.checkPassWord = ''
        },
        
    }
};
</script>
<style scoped lang="scss">
.head {
    width: 100%;
    height: 5rem /* 80/16 */;
    background: #003f89;
    box-shadow: 0px 11px 14px -5px rgba(0, 0, 0, 0.05);
    display: flex;
    line-height: 5rem /* 80/16 */;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    align-items: center;
}

.head .item_menu {
    margin-left: 2rem /* 32/16 */;
    color: #d1d1d1;
    display: flex;
    width: 6.875rem /* 110/16 */;
    height: 2.375rem /* 38/16 */;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.head .item_menu_sel {
    margin: auto 0;
    margin-left: 2rem /* 32/16 */;
    width: 6.875rem /* 110/16 */;
    height: 2.375rem /* 38/16 */;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1.1875rem /* 19/16 */;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    line-height: 2.375rem /* 38/16 */;
    cursor: pointer;
    /* opacity: 0.1; */
}

.head img {
    width: 1.125rem /* 18/16 */;
    height: 1.125rem /* 18/16 */;
    margin: auto 0;
    margin-right: 0.1875rem /* 3/16 */;
}
.username {
    margin-left: auto;
    margin-right: 3.125rem /* 50/16 */;
}
.el-dropdown {
    color: #ffffff;
}
.el-dropdown-menu__item--divided {
    border: none;
}
.user-name::before {
    content: '欢迎您，';
    font-weight: 500;
    color: #ffffff;
}
.content_box {
    width: 100%;
    height: calc(100vh - 5rem);
    background: #f7f7f7;
    /* background: #666666; */
    box-sizing: border-box;
    padding: 3.125rem /* 50/16 */ 2.5rem /* 40/16 */;
}
.newForm {
    .el-form-item {
        border-bottom: 1px solid #d8d8d8;
    }
    .el-input__inner {
        border: none;
        width: 450px;
    }
    .el-icon-arrow-up:before {
        display: inline-block;
        width: 8px;
        height: 5px;
    }
}
.el-dialog__header {
    background: rgba(33, 74, 143, 0.1);
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(33, 74, 143, 1);
}
.el-dialog__body {
    max-height: 720px;
    // overflow-y: scroll;
    position: relative;
}
.el-icon-close:before {
    border-radius: 50%;
    color: #fff;
    background-color: rgba(33, 74, 143, 1);
}
.el-input__inner {
    color: rgba(153, 153, 153, 1);
    height: 35px;
}
.el-form-item__label {
    color: #333;
    font-size: 16px;
}
.handle-date-picker {
    width: 100%;
    border: none;
}
.newForm/deep/.el-input__inner {
    border: none;
}
.newForm /deep/.el-icon-date:before {
    content: none;
}
.newForm /deep/.el-input--prefix .el-input__inner {
    padding-left: 15px;
}
.specityBox {
    .tableBox {
        // border:1px solid red;
        max-height: 452px;
        overflow-y: scroll;
    }
    .tableBox::-webkit-scrollbar {
        width: 0;
    }
}
.el-dialog__body {
    padding: 2.5rem /* 40/16 */ 0 1.25rem /* 20/16 */ 1.25rem /* 20/16 */ !important;
    padding-top: 2.5rem /* 40/16 */ !important;
    padding-bottom: 64px;
}
.el-progress__text {
    width: 100% !important;
}

input[type='number'] {
    -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tableBtnBox {
    margin-top: 1.875rem /* 30/16 */;
    // margin-bottom:64px!important;
    text-align: center;
    .btn1 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 0.2);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 79, 171, 1);
        margin-right: 56px;
    }
    .btn2 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 1);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
}
</style>
